<template>
	<div class="top">
		 <div class="swiper-container">
			<div class="swiper-wrapper">
			  <div class="swiper-slide" v-for="item in listImg"><img :src="item"/></div>
			</div>
	    	<!-- Add Pagination -->
	    	<div class="swiper-pagination"></div>
		</div>
		<div class="nav">
			<ul>
				<li v-for="item in alist">
					<div class="pc">
						<img :src="item.src"/>
					</div>
					<p>{{item.name}}</p>
				</li>
			</ul>
		</div>
		<hr/>
	</div>
</template>

<script>
	import lb1 from '@/assets/images/lb.png'
	import lb2 from '@/assets/images/lb2.png'
	import Swiper from 'swiper'
	export default {
		name:"warper",
		data:function(){
			return {
				listImg:[lb1,lb2],
				alist:[
				{src:require("@/assets/images/p1.png"),name:"摄影"},
				{src:require("@/assets/images/p2.png"),name:"影视"},
				{src:require("@/assets/images/p3.png"),name:"设计"},
				{src:require("@/assets/images/p4.png"),name:"修图"},
				{src:require("@/assets/images/p5.png"),name:"模特"},
				{src:require("@/assets/images/p8.png"),name:"客户"},
				{src:require("@/assets/images/p6.png"),name:"会员"},
				{src:require("@/assets/images/p7.png"),name:"关于"},
				],
				
			}
		},
		mounted(){
			//mounted这个钩子函数是在DOM对象挂载好之后触发的函数
			//通常可以在这里进行一些DOM的操作
			var swiper = new Swiper('.swiper-container', {
		      pagination: {
		        el: '.swiper-pagination',
		      },
		    });
		}
	}
</script>

<style lang="scss">
	.swiper-slide{
		width: 100%;
		overflow: hidden;
		img{
			width: 100%;
		}
	}
	.nav{
		width: 100%;
		margin-top: 48px;
		ul{
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			li{
				width: 25%;
				text-align: center;
				margin-bottom: 20px;
				.pc{
					width: 35px;
					height: 35px;
					overflow:hidden;
					margin:0 auto;
					margin-bottom:5px;
					img{
						width: 100%;
					}
				}
				p{
					font-size: 15px;
					text-align: center;
				}
			}
		}
	}
	hr{
		border: 3px solid #e5e5e5;
	}
</style>